<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>啊哦，抽错了呢</title>
    <link rel="icon" href="../picture/favicon.ico">
    <style>* {
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background:  #f2e9d4;
    }
h1 {
    text-align: center;
    font-size: 30px;

    font-weight: bold;
}
    #string {
        width: .1rem;
        border-right: .1rem solid #777;
        height: 45vmin;
        -webkit-transform: translate3d(10vmin, 0, 0);
        transform: translate3d(10vmin, 0, 0);
    }

    #container {
        position: absolute;
        left: 50%;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        width: 20vmin;
        -webkit-perspective: 2000px;
        perspective: 2000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transition: -webkit-transform 1s ease-out;
        transition: -webkit-transform 1s ease-out;
        transition: transform 1s ease-out;
        transition: transform 1s ease-out, -webkit-transform 1s ease-out;
    }

    #box {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #lid {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: translate3d(-1vmin, 0, 0);
        transform: translate3d(-1vmin, 0, 0);
    }

    #lid .face {
        width: 22vmin;
        height: 5vmin;
        background: #24c0c0;
    }

    #lid .face.top {
        height: 22vmin;
    }

    #lid .face.front {
        -webkit-transform: rotateY(0deg) translateZ(11vmin);
        transform: rotateY(0deg) translateZ(11vmin);
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    }

    #lid .face.back {
        -webkit-transform: rotateX(180deg) translateZ(11vmin);
        transform: rotateX(180deg) translateZ(11vmin);
        box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.1);
    }

    #lid .face.left {
        -webkit-transform: rotateY(-90deg) translateZ(11vmin);
        transform: rotateY(-90deg) translateZ(11vmin);
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    }

    #lid .face.right {
        -webkit-transform: rotateY(90deg) translateZ(11vmin);
        transform: rotateY(90deg) translateZ(11vmin);
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
    }

    #lid .face.top {
        -webkit-transform: rotateX(90deg) translateZ(11vmin);
        transform: rotateX(90deg) translateZ(11vmin);
    }

    #lid .face.bottom {
        -webkit-transform: rotateX(-90deg) translateZ(11vmin);
        transform: rotateX(-90deg) translateZ(11vmin);
    }

    .face {
        width: 20vmin;
        height: 20vmin;
        background: #23bcbc;
        position: absolute;
        display: inline-block;
        color: white;
        font-size: 2rem;
        opacity: 1;
    }

    .face.front {
        -webkit-transform: rotateY(0deg) translateZ(10vmin);
        transform: rotateY(0deg) translateZ(10vmin);
    }

    .face.back {
        -webkit-transform: rotateX(180deg) translateZ(10vmin);
        transform: rotateX(180deg) translateZ(10vmin);
    }

    .face.left {
        -webkit-transform: rotateY(-90deg) translateZ(10vmin);
        transform: rotateY(-90deg) translateZ(10vmin);
    }

    .face.right {
        -webkit-transform: rotateY(90deg) translateZ(10vmin);
        transform: rotateY(90deg) translateZ(10vmin);
    }

    .face.top {
        -webkit-transform: rotateX(90deg) translateZ(10vmin);
        transform: rotateX(90deg) translateZ(10vmin);
    }

    .face.bottom {
        -webkit-transform: rotateX(-90deg) translateZ(10vmin);
        transform: rotateX(-90deg) translateZ(10vmin);
    }

    .face .ribbon {
        position: absolute;
        background: #ccd;
        border-right: 1px solid rgba(255, 255, 255, 0.95);
        border-left: 1px solid rgba(255, 255, 255, 0.95);
        width: 20%;
        height: 100%;
        margin: 0 40%;
    }

    .face .ribbon:nth-of-type(2) {
        width: 100%;
        height: 20%;
        margin: 40% 0;
    }

    #container {
        -webkit-animation: swing 1600ms infinite alternate ease-in-out;
        animation: swing 1600ms infinite alternate ease-in-out;
    }

    @-webkit-keyframes swing {
        0% {
            -webkit-transform: rotateY(-30deg) rotateZ(40deg);
            transform: rotateY(-30deg) rotateZ(40deg);
        }
        100% {
            -webkit-transform: rotateY(30deg) rotateZ(-40deg);
            transform: rotateY(30deg) rotateZ(-40deg);
        }
    }

    @keyframes swing {
        0% {
            -webkit-transform: rotateY(-30deg) rotateZ(40deg);
            transform: rotateY(-30deg) rotateZ(40deg);
        }
        100% {
            -webkit-transform: rotateY(30deg) rotateZ(-40deg);
            transform: rotateY(30deg) rotateZ(-40deg);
        }
    }
    </style>
    <script>var c = document.getElementById('container');
    var box = document.getElementById('box');

    window.addEventListener('devicemotion', function (e) {
        console.log(e);
        var ps = document.querySelectorAll('p');
        ps[0] = 'a' + e.rotationRate.aplha;
        ps[1] = 'b' + e.rotationRate.beta;
        ps[2] = 'g' + e.rotationRate.gamma;
        ps[3].textContent = e.accelerationIncludingGravity.x;
        ps[4].textContent = e.accelerationIncludingGravity.y;
        ps[5].textContent = e.accelerationIncludingGravity.z;
    });</script>
</head>

<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h1>啊哦，你跟贺卡擦肩而过欸</h1>
<div id="container">
    <div id="string"></div>
    <div id="lid">
        <div id="front" class="front face">
            <div class="ribbon"></div>
        </div>
        <div id="back" class="back face">
            <div class="ribbon"></div>
        </div>
        <div id="left" class="left face">
            <div class="ribbon"></div>
        </div>
        <div id="right" class="right face">
            <div class="ribbon"></div>
        </div>
        <div id="top" class="top face">
            <div class="ribbon"></div>
            <div class="ribbon"></div>
        </div>
    </div>
    <div id="box">
        <div id="front" class="front face">
            <div class="ribbon"></div>
        </div>
        <div id="back" class="back face">
            <div class="ribbon"></div>
        </div>
        <div id="left" class="left face">
            <div class="ribbon"></div>
        </div>
        <div id="right" class="right face">
            <div class="ribbon"></div>
        </div>
        <div id="bottom" class="bottom face">
            <div class="ribbon"></div>
            <div class="ribbon"></div>
        </div>
    </div>
</div>
</body>
</html>